/** 应用主题样式，优先级：本文件 > element-plus > tailwindcss */

/** 主题样式变量 */
html {
	// 正常模式
	& {
		// 全局通用
		--app-text-color-base: #515a6e; // 文字主要颜色
		--app-text-color-tips: #78859b; // 提示文字颜色
		--app-bg-color: #f5f7f9; // 页面背景色
		--app-box-bg-color: #fff; // 盒子背景色

		// 主框架页 导航样式
		--app-main-sider-bg-color: #191a23;
		--app-main-sider-hover-bg-color: #14151c;
		--app-main-sider-text-color: #fff;

		// 主框架页 顶部工具栏样式
		--app-main-header-bg-color: #fff;
		--app-main-header-hover-bg-color: #eeeeee;
		--app-main-header-text-color: var(--app-text-color-base);
		--app-main-header-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
	}

	// 黑夜模式
	&.dark {
		color-scheme: dark;
		// 全局通用
		--app-text-color-base: #ececec;
		--app-text-color-tips: #828792;
		--app-bg-color: #121212;
		--app-box-bg-color: #202020;

		// 主框架页 导航样式
		--app-main-sider-bg-color: #181818;
		--app-main-sider-hover-bg-color: #272727;
		--app-main-sider-text-color: #e9e9e9;

		// 主框架页 顶部工具栏样式
		--app-main-header-bg-color: #121212;
		--app-main-header-hover-bg-color: #292929;
		--app-main-header-text-color: var(--app-text-color-base);
		--app-main-header-shadow: 1px 1px 6px rgba(255, 255, 255, 0.2);
	}
}

/** 定制element-plus样式 */
html {
	body {
		--el-text-color-primary: var(--app-text-color-base);
		--el-bg-color-overlay: var(--app-box-bg-color);
	}

	& {
		body {
			.el-table {
				--el-table-header-bg-color: #f8f8f9;
				--el-table-header-text-color: var(--app-text-color-base);
			}
		}
	}

	&.dark {
		body {
			.el-table {
				--el-table-header-bg-color: #181818;
				--el-table-header-text-color: var(--app-text-color-base);
			}
		}
	}
}

/** 全局样式 */
html {
	body {
		background: var(--app-bg-color);
	}
}

/** 全局class */
body {
	.line-clamp {
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.line-clamp-1 {
		.line-clamp;
		-webkit-line-clamp: 2;
	}

	.line-clamp-3 {
		.line-clamp;
		-webkit-line-clamp: 3;
	}
}
